iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0

Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ,更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分,並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP13。


接著繼續來處理 DataService 的相關設計。

首先,打開 Servcies 底下的 IDataService 這個介面,並加上下列方法的宣告:

ObservableCollection<Models.OrderDetailDisplay> GetOrderDetailDisplays(int orderId);

完成結果如下圖:
01

接著仍是跟過去一樣要把實作此 IDataService 介面的兩個類別 DataService、MockData 加上實作方法。

先開啟 DataService 類別,並加上下列程式碼:

public ObservableCollection<OrderDetailDisplay> GetOrderDetailDisplays(int orderId)
{
    throw new NotImplementedException();
}

完成結果如下圖:
02

再來打開在 Utilities 底下的 MockData 並加入下列程式碼:

public ObservableCollection<OrderDetailDisplay> GetOrderDetailDisplays(int orderId)
{
    throw new NotImplementedException();
}

完成結果如下圖:
03

接著在 MockData 當中宣告一個 orderDetails 的集合:

private readonly ObservableCollection<Models.OrderDetail> orderDetails;

完成結果如下圖:
04

並在其建構方法當中產生 orderDetails 的集合物件及其資料:

orderDetails = new ObservableCollection<Models.OrderDetail>()
{
    new Models.OrderDetail { Id =  1, OrderId = 1, ProductId = 1, Quantity =   5, Price = 190, Note = "無" },
    new Models.OrderDetail { Id =  2, OrderId = 1, ProductId = 2, Quantity =  40, Price =  45, Note = "無" },
    new Models.OrderDetail { Id =  3, OrderId = 1, ProductId = 4, Quantity =  20, Price = 170, Note = "無" },
                                    
    new Models.OrderDetail { Id =  4, OrderId = 2, ProductId = 3, Quantity = 200, Price =  50, Note = "無" },
    new Models.OrderDetail { Id =  5, OrderId = 2, ProductId = 2, Quantity = 100, Price =  40, Note = "無" },
    new Models.OrderDetail { Id =  6, OrderId = 2, ProductId = 4, Quantity = 100, Price = 150, Note = "無" },
    new Models.OrderDetail { Id =  7, OrderId = 2, ProductId = 5, Quantity =  20, Price =  40, Note = "無" },
                                    
    new Models.OrderDetail { Id =  8, OrderId = 3, ProductId = 1, Quantity =  10, Price = 180, Note = "無" },
    new Models.OrderDetail { Id =  9, OrderId = 3, ProductId = 2, Quantity =  30, Price =  45, Note = "無" },

    new Models.OrderDetail { Id = 10, OrderId = 4, ProductId = 3, Quantity = 200, Price =  50, Note = "無" },
    new Models.OrderDetail { Id = 11, OrderId = 4, ProductId = 2, Quantity =  50, Price =  45, Note = "無" },
    new Models.OrderDetail { Id = 13, OrderId = 4, ProductId = 5, Quantity =  20, Price =  40, Note = "無" },

    new Models.OrderDetail { Id = 14, OrderId = 5, ProductId = 1, Quantity =   1, Price = 200, Note = "無" },
    new Models.OrderDetail { Id = 15, OrderId = 5, ProductId = 2, Quantity =  10, Price =  50, Note = "無" },
    new Models.OrderDetail { Id = 16, OrderId = 5, ProductId = 4, Quantity =  10, Price = 180, Note = "無" },

    new Models.OrderDetail { Id = 17, OrderId = 6, ProductId = 1, Quantity = 200, Price = 160, Note = "無" },

    new Models.OrderDetail { Id = 18, OrderId = 7, ProductId = 2, Quantity = 500, Price =  35, Note = "無" },

    new Models.OrderDetail { Id = 19, OrderId = 8, ProductId = 1, Quantity =  20, Price = 160, Note = "無" },
    new Models.OrderDetail { Id = 20, OrderId = 8, ProductId = 5, Quantity =  50, Price =  40, Note = "無" },
};

完成結果如下圖:
05

注意這邊的 OrderDetail 只有增加給前 8 筆訂單(原設置有 15 筆),若有需要可以自行增加後 7 筆訂單的 OrderDetail。

最後,再回到前面幫 MockData 設置的 GetOrderDetailDisplays 方法,並把方法該執行的程式碼替換成如下:

var orderDetailDisplays = from orderDetail in orderDetails
                            join product in goods on orderDetail.ProductId equals product.Id
                            where orderDetail.OrderId == orderId
                            select new Models.OrderDetailDisplay
                            {
                                OrderDetailId = orderDetail.Id,
                                ProductName = product.Name,
                                Quantity = orderDetail.Quantity,
                                Note = orderDetail.Note
                            };
return new ObservableCollection<Models.OrderDetailDisplay>(orderDetailDisplays);

完成結果如下圖:
06

最後記得到 OrderDetailsPageViewModel 當中 OrderId 在 Set 當中所註解的程式碼移除註解:
07

如果沒有意外,應該就能直接測試執行囉~~~
08-Android

08-iOS


上一篇
EP12
下一篇
EP14
系列文
Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言